import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const PredictionDataMeta: IPublicTypeComponentMetadata = {
  componentName: 'PredictionData',
  title: '预测数据',
  category: '左右侧',
  group: '消防安全',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'PredictionData',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
  ],
  configure: {
    props: [
      // 基础属性
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础属性',
        },
        items: [
                     {
             name: 'width',
             title: {
               label: '宽度',
               tip: '组件宽度'
             },
             setter: 'NumberSetter',
             defaultValue: 500,
           },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '组件高度'
            },
            setter: 'NumberSetter',
            defaultValue: 1200,
          },
          {
            name: 'noResponsiveScale',
            title: {
              label: '禁用响应式缩放',
              tip: '当父容器有缩放时，禁用子组件的响应式缩放'
            },
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'componentId',
            title: {
              label: '组件ID',
              tip: '设置组件的唯一标识符'
            },
            setter: 'StringSetter',
          },
        ]
      },
      // 第一个状态栏配置
      {
        name: 'firstStatusBar',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第一个状态栏配置',
        },
        items: [
          {
            name: 'firstStatusBar.chineseText',
            title: {
              label: '中文文字',
              tip: '第一个状态栏的中文文字'
            },
            setter: 'StringSetter',
            defaultValue: '预测数据',
          },
          {
            name: 'firstStatusBar.englishText',
            title: {
              label: '英文文字',
              tip: '第一个状态栏的英文文字'
            },
            setter: 'StringSetter',
            defaultValue: 'PREDICTION DATA',
          },
          {
            name: 'firstStatusBar.theme',
            title: {
              label: '主题',
              tip: '第一个状态栏的主题'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
            defaultValue: 'dark',
          }
        ]
      },
      // 标题配置
      {
        name: 'titleHeader',
        type: 'group',
        display: 'accordion',
        title: {
          label: '标题配置',
        },
        items: [
          {
            name: 'titleHeader.title',
            title: {
              label: '标题',
              tip: '标题组件的文字'
            },
            setter: 'StringSetter',
            defaultValue: '数据预测分析',
          }
        ]
      },
      // 火灾预测配置
      {
        name: 'firePrediction',
        type: 'group',
        display: 'accordion',
        title: {
          label: '火灾预测配置',
        },
        items: [
          {
            name: 'firePrediction.width',
            title: {
              label: '宽度',
              tip: '火灾预测组件的宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 500,
          },
          {
            name: 'firePrediction.height',
            title: {
              label: '高度',
              tip: '火灾预测组件的高度'
            },
            setter: 'NumberSetter',
            defaultValue: 300,
          }
        ]
      },
      // 第二个状态栏配置
      {
        name: 'secondStatusBar',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第二个状态栏配置',
        },
        items: [
          {
            name: 'secondStatusBar.chineseText',
            title: {
              label: '中文文字',
              tip: '第二个状态栏的中文文字'
            },
            setter: 'StringSetter',
            defaultValue: '巡查监控',
          },
          {
            name: 'secondStatusBar.englishText',
            title: {
              label: '英文文字',
              tip: '第二个状态栏的英文文字'
            },
            setter: 'StringSetter',
            defaultValue: 'INSPECTION MONITOR',
          },
          {
            name: 'secondStatusBar.theme',
            title: {
              label: '主题',
              tip: '第二个状态栏的主题'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
            defaultValue: 'dark',
          }
        ]
      },
      // 第一个第三方巡查配置
      {
        name: 'firstThirdPartyInspection',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第一个第三方巡查配置',
        },
        items: [
          {
            name: 'firstThirdPartyInspection.width',
            title: {
              label: '宽度',
              tip: '第一个第三方巡查组件的宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 500,
          },
          {
            name: 'firstThirdPartyInspection.height',
            title: {
              label: '高度',
              tip: '第一个第三方巡查组件的高度'
            },
            setter: 'NumberSetter',
            defaultValue: 200,
          }
        ]
      },
      // 第三个状态栏配置
      {
        name: 'thirdStatusBar',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第三个状态栏配置',
        },
        items: [
          {
            name: 'thirdStatusBar.chineseText',
            title: {
              label: '中文文字',
              tip: '第三个状态栏的中文文字'
            },
            setter: 'StringSetter',
            defaultValue: '数据分析',
          },
          {
            name: 'thirdStatusBar.englishText',
            title: {
              label: '英文文字',
              tip: '第三个状态栏的英文文字'
            },
            setter: 'StringSetter',
            defaultValue: 'DATA ANALYSIS',
          },
          {
            name: 'thirdStatusBar.theme',
            title: {
              label: '主题',
              tip: '第三个状态栏的主题'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
            defaultValue: 'dark',
          }
        ]
      },
      // 第二个第三方巡查配置
      {
        name: 'secondThirdPartyInspection',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第二个第三方巡查配置',
        },
        items: [
          {
            name: 'secondThirdPartyInspection.width',
            title: {
              label: '宽度',
              tip: '第二个第三方巡查组件的宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 500,
          },
          {
            name: 'secondThirdPartyInspection.height',
            title: {
              label: '高度',
              tip: '第二个第三方巡查组件的高度'
            },
            setter: 'NumberSetter',
            defaultValue: 200,
          }
        ]
      },
      // 样式属性
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式属性',
        },
        items: [
          {
            name: 'style',
            title: {
              label: '自定义样式',
            },
            setter: 'StyleSetter',
          },
          {
            name: 'className',
            title: {
              label: '自定义类名',
            },
            setter: 'StringSetter',
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
    },
    component: {
      isContainer: false,
      isModal: false,
    },
  },
  icon: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1UyR3MKMFvk_!!6000000002580-55-tps-200-200.svg',
  keywords: ['预测数据', 'prediction', 'data', 'analysis', 'chart'],
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '预测数据',
    screenshot: '',
    schema: {
      componentName: 'PredictionData',
      props: {
                 width: 500,
        height: 1075,
        noResponsiveScale: true,
        componentId: 'prediction-data-container',
        firstStatusBar: {
          chineseText: '预测数据',
          englishText: 'PREDICTION DATA',
          theme: 'dark'
        },
        titleHeader: {
          title: '数据预测分析'
        },
        firePrediction: {
          width: 500,
          height: 93
        },
        secondStatusBar: {
          chineseText: '巡查监控',
          englishText: 'INSPECTION MONITOR',
          theme: 'dark'
        },
        firstThirdPartyInspection: {
          width: 500,
          height: 200
        },
        thirdStatusBar: {
          chineseText: '第三方巡查',
          englishText: 'THIRD-PARTY INSPECTION',
          theme: 'dark'
        },
        secondThirdPartyInspection: {
          width: 500,
          height: 434
        }
      }
    }
  }
];

export default {
  ...PredictionDataMeta,
  snippets
}; 